<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymleaf.org"/>
<head>
    <meta charset="UTF-8">
    <title>激活账号</title>
    <script language="javascript" type="text/javascript" src="vue/vue2.x.js"></script>
    <script language="javascript" type="text/javascript" src="elementUI/elementUI2.x.js"></script>
    <!--    <link rel="stylesheet" href="elementUI/elementUI2.x.css" type="text/css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style type="text/css">
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div id="activation">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>激活账号</span>
        </div>
        <div class="text item">
            <input type="hidden" ref="umail" th:value="${user_mail}">
            <el-form :model="card" ref="card" label-width="100px">
                <el-form-item label="用户账号" prop="user_mail">
                    <el-input type="text" v-model="card.user_mail" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="激活码" prop="key">
                    <el-input type="text" v-model="card.key" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getCode">获取验证码</el-button>
                    <el-button type="primary" @click="toActivation('card')">激活</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</div>

<script>
    var vm = new Vue({
        el: '#activation',
        data:{
            card: {
                key:'',
                user_mail:''
            },
            rules: {
                key: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
                user_mail: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ]
            }
        },
        mounted(){
            // console.log(this.$refs.umail.value);
            //将注册的用户账号回显到账户输入框
            this.card.user_mail = this.$refs.umail.value;
        },
        methods:{
            getCode: function(){
                if(this.card.user_mail!==""){
                    const loading = vm.$loading({
                        lock: true,
                        text: '正在获取验证码，请前往邮箱查看...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    var formdata= new FormData();
                    formdata.append("user_mail",this.card.user_mail);
                    axios.post('/getCode',formdata).then(function (resp) {
                        console.log(resp)
                        console.log(resp.data)
                        if(resp.data=="OK") {
                            loading.close();
                            vm.$message({
                                message: '发送完成',
                                type: 'success'
                            });
                        }else {
                            vm.$message({
                                message: '出错了，邮件发送失败',
                                type: 'error'
                            });
                        }
                    }).catch(function (error) {
                        console.log(error);
                    })
                }else{
                    vm.$message({
                        message: '请输入账户',
                        type: 'warning'
                    });
                }
            },
            toActivation:function(){
                  if(this.card.user_mail!==""&&this.card.key!==""){
                      console.log(this.card.key)
                      var formdata= new FormData();
                      formdata.append("key",this.card.key);
                      formdata.append("user_mail",this.card.user_mail);
                      if(this.key!==''){
                          axios.post('/activation',formdata).then(function(resp){
                              if(resp.data==true){
                                  vm.$message({
                                      message: '激活成功,返回登录',
                                      type: 'success'
                                  });
                                  setTimeout(function(){
                                      window.location.href = "http://localhost:8080/";
                                  },2000)
                              }else {
                                  vm.$message({
                                      message: '激活失败',
                                      type: 'error'
                                  });
                              }
                          }).catch(function(error){
                              console.log(error);
                          })
                      }
                  }else {
                      vm.$message({
                          message: '请填写完整信息',
                          type: 'warning'
                      });
                  }
            }
        }
    });
</script>
</body>
</html>
